import React, { useEffect, useState } from "react";
import {
	ApartmentOutlined,
	HighlightOutlined,
	LaptopOutlined,
	LinkOutlined,
	NotificationOutlined,
	SecurityScanOutlined,
	UserOutlined
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Avatar, Breadcrumb, Button, ConfigProvider, Flex, Layout, Menu, theme } from "antd";
import Typography from "antd/es/typography/Typography";
import OrgChart from "./orgChart";
import SignaTure from "./signaTure";
import { useLocation } from "react-router-dom";
import BaseInfo from "./baseInfo";

const { Header, Content, Footer, Sider } = Layout;
// @ts-ignore
const { Text } = Typography;
const items1: MenuProps["items"] = ["1", "2", "3"].map(key => ({
	key,
	label: `nav ${key}`
}));

const items2: MenuProps["items"] = [UserOutlined, LaptopOutlined, NotificationOutlined].map((icon, index) => {
	const key = String(index + 1);

	return {
		key: `sub${key}`,
		icon: React.createElement(icon),
		label: `subnav ${key}`,

		children: new Array(4).fill(null).map((_, j) => {
			const subKey = index * 4 + j + 1;
			return {
				key: subKey,
				label: `option${subKey}`
			};
		})
	};
});

const items: MenuProps["items"] = [
	{
		type: "group",
		label: <Text strong>基础</Text>
	},
	{
		key: "base",
		label: "基本信息",
		icon: <UserOutlined />
	},
	// { type: "divider" },
	{
		type: "group",
		label: <Text strong>其他</Text>
	},
	{
		key: "org",
		label: "组织信息",
		icon: <ApartmentOutlined />
	},
	{
		key: "security",
		label: "安全设置",
		icon: <SecurityScanOutlined />
	},
	{
		key: "accountBind",
		label: "账号绑定",
		icon: <LinkOutlined />
	},
	{
		key: "signature",
		label: "电子签名",
		icon: <HighlightOutlined />
	}
];
export const menuStyle: React.CSSProperties = {
	borderInlineEnd: "none",
	padding: "10px 5px 0px 5px"
};

const App: React.FC = () => {
	const {
		token: { colorBgContainer, borderRadiusLG }
	} = theme.useToken();
	const [selectedKeys, setSelectedKeys] = useState<string[]>(["base"]);
	useEffect(() => {
		const hash = location.hash.replace("#", "");
		const currentKeys = hash.split("#");
		if (currentKeys.length > 1) {
			const dataKey = currentKeys[currentKeys.length - 1];
			setSelectedKeys([dataKey]);
		} else {
			setSelectedKeys(["base"]);
		}
	}, []);

	const onOpenChange = (openKeys: string[]) => {
		console.log(openKeys);
	};

	const [openKeys, setOpenKeys] = useState<string[]>([]);
	const clickMenu: MenuProps["onClick"] = ({ key }: { key: string }) => {
		const hash = location.hash.replace("#", "");
		const currentKeys = hash.split("#");
		let newUrl = window.location.href;
		// eslint-disable-next-line no-debugger
		if (currentKeys.length > 1) {
			const dataKey = currentKeys[currentKeys.length - 1];
			newUrl = newUrl.replace(dataKey, key);
		} else {
			newUrl = newUrl + "#" + key;
		}
		history.pushState({}, "", newUrl);
		setSelectedKeys([key]);
	};
	return (
		<Layout style={{ minHeight: "calc(100vh - 55px - 20px)", padding: "0 200px" }}>
			<ConfigProvider
				theme={{
					components: {
						Menu: {
							itemBorderRadius: 4,
							colorText: "#525967"
						}
					}
				}}
			>
				<Sider width={230} theme="light">
					<Menu
						mode="inline"
						style={menuStyle}
						onOpenChange={onOpenChange}
						selectedKeys={selectedKeys}
						onClick={clickMenu}
						triggerSubMenuAction="click"
						openKeys={openKeys}
						defaultSelectedKeys={["base"]}
						items={items}
					/>
				</Sider>
			</ConfigProvider>
			{/* colorBgContainer */}
			<Content
				style={{
					display: "flex",
					flexDirection: "column",
					width: "100%",
					minHeight: 0,
					position: "relative",
					paddingLeft: "15px",
					paddingRight: "15px"
				}}
			>
				<div
					style={{
						minHeight: "100%",
						backgroundColor: colorBgContainer
					}}
				>
					<div style={{ padding: "20px" }}>
						{selectedKeys[0] === "base" && <BaseInfo />}
						{selectedKeys[0] === "org" && <OrgChart />}
						{selectedKeys[0] === "signature" && <SignaTure />}
					</div>
				</div>
			</Content>
		</Layout>
	);
};

export default App;
